<template>
  <a-card :bordered="false">
    <!-- table区域-begin -->
    <a-table
        ref="table"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        bordered
        rowKey="id"
        size="default">

    </a-table>
    <!-- table区域-end -->


  </a-card>
</template>

<script>

export default {
  name: "RowspanTable",
  components: {},
  data() {
    return {
      description: '存放位置设置表管理页面',
      levelNum: {},
      gridNum: 0,
      boxNum: 0,
      cabinetNo: "",
      // 表头
      columns: [{
        title: '分组一',
        align: "center",
        dataIndex: 'cabinetNo',
        customRender: (value, row, index) => {
          const obj = {
            children: value,
            attrs: {},
          };
          if (index === 0) {
            obj.attrs.rowSpan = this.dataSource.length;
          } else {
            obj.attrs.rowSpan = 0;
          }
          return obj;
        },
      },
        {
          title: '分组二',
          align: "center",
          dataIndex: 'levelNo',
          customRender: (value, row, index) => {
            const obj = {
              children: value,
              attrs: {},
            };
            //当前列跨行的条数
            var a = parseInt(this.levelNum);
            var b = parseInt(this.gridNum) * parseInt(this.boxNum);
            console.log(a);
            for (var c = 0; c <= a; c++) {
              if (index === (c * b)) {
                console.log(1);
                console.log(c * b);
                obj.attrs.rowSpan = b;
                break;
              } else {
                obj.attrs.rowSpan = 0;
              }
            }
            return obj;
          }
        },
        {
          title: '分组三',
          align: "center",
          dataIndex: 'gridNo',
          customRender: (value, row, index) => {
            const obj = {
              children: value,
              attrs: {},
            };
            var a = parseInt(this.levelNum) * parseInt(this.gridNum);
            var b = parseInt(this.boxNum);
            for (var c = 0; c <= a; c++) {
              if (index === (c * b)) {
                obj.attrs.rowSpan = b;
                break;
              } else {
                obj.attrs.rowSpan = 0;
              }
            }
            return obj;
          },
        }, {
          title: '字段一',
          align: "center",
          dataIndex: 'boxNo'
        }, {
          title: '字段二',
          align: 'center',
          dataIndex: 'storedNum'
        }, {
          title: '字段三',
          align: "center",
          dataIndex: 'maxNum'
        },],
      //数据集
      dataSource: [{
        "id": "cb1dfd12cbeca3f8ba121439ee7e2411",
        "attributeId": "e62831f314e1390edbd884e9d9e6aca6",
        "cabinetNo": "1",
        "levelNo": "1",
        "gridNo": "1",
        "boxNo": "1",
        "storedNum": 2,
        "maxNum": 2,
        "unitNum": 2,
        "assignStatus": "1",
        "storageStatus": "1",
        "remark": null,
        "createBy": "admin",
        "createTime": "2019-04-02",
        "updateBy": "admin",
        "updateTime": "2019-04-02"
      }, {
        "id": "f903d50d02904b14175dccf2a7948777",
        "attributeId": "e62831f314e1390edbd884e9d9e6aca6",
        "cabinetNo": "1",
        "levelNo": "1",
        "gridNo": "1",
        "boxNo": "2",
        "storedNum": 2,
        "maxNum": 2,
        "unitNum": 2,
        "assignStatus": "1",
        "storageStatus": "1",
        "remark": null,
        "createBy": "admin",
        "createTime": "2019-04-02",
        "updateBy": "admin",
        "updateTime": "2019-04-02"
      }, {
        "id": "4f04c0ca4202535d678871b07e706cf6",
        "attributeId": "e62831f314e1390edbd884e9d9e6aca6",
        "cabinetNo": "1",
        "levelNo": "1",
        "gridNo": "2",
        "boxNo": "1",
        "storedNum": 2,
        "maxNum": 2,
        "unitNum": 2,
        "assignStatus": "1",
        "storageStatus": "1",
        "remark": null,
        "createBy": "admin",
        "createTime": "2019-04-02",
        "updateBy": "admin",
        "updateTime": "2019-04-02"
      }, {
        "id": "d0c91dabedfc03efad0126e50ea72e80",
        "attributeId": "e62831f314e1390edbd884e9d9e6aca6",
        "cabinetNo": "1",
        "levelNo": "1",
        "gridNo": "2",
        "boxNo": "2",
        "storedNum": 2,
        "maxNum": 2,
        "unitNum": 2,
        "assignStatus": "1",
        "storageStatus": "1",
        "remark": null,
        "createBy": "admin",
        "createTime": "2019-04-02",
        "updateBy": "admin",
        "updateTime": "2019-04-08"
      }, {
        "id": "1e8bfcbe4352afbab8878f9fd368e007",
        "attributeId": "e62831f314e1390edbd884e9d9e6aca6",
        "cabinetNo": "1",
        "levelNo": "2",
        "gridNo": "1",
        "boxNo": "1",
        "storedNum": 1,
        "maxNum": 2,
        "unitNum": 1,
        "assignStatus": "1",
        "storageStatus": "0",
        "remark": null,
        "createBy": "admin",
        "createTime": "2019-04-02",
        "updateBy": "admin",
        "updateTime": "2019-04-08"
      }, {
        "id": "d76087d8d3ebc7a59d43458588f26941",
        "attributeId": "e62831f314e1390edbd884e9d9e6aca6",
        "cabinetNo": "1",
        "levelNo": "2",
        "gridNo": "1",
        "boxNo": "2",
        "storedNum": 0,
        "maxNum": 2,
        "unitNum": 0,
        "assignStatus": "1",
        "storageStatus": "0",
        "remark": null,
        "createBy": "admin",
        "createTime": "2019-04-02",
        "updateBy": "admin",
        "updateTime": "2019-04-02"
      }, {
        "id": "7bf7754f12e1bf95edcd501cc6b85e62",
        "attributeId": "e62831f314e1390edbd884e9d9e6aca6",
        "cabinetNo": "1",
        "levelNo": "2",
        "gridNo": "2",
        "boxNo": "1",
        "storedNum": 0,
        "maxNum": 2,
        "unitNum": 0,
        "assignStatus": "1",
        "storageStatus": "0",
        "remark": null,
        "createBy": "admin",
        "createTime": "2019-04-02",
        "updateBy": "admin",
        "updateTime": "2019-04-02"
      }, {
        "id": "9cd08d733657d5b286bec870f12f6ecf",
        "attributeId": "e62831f314e1390edbd884e9d9e6aca6",
        "cabinetNo": "1",
        "levelNo": "2",
        "gridNo": "2",
        "boxNo": "2",
        "storedNum": 0,
        "maxNum": 2,
        "unitNum": 0,
        "assignStatus": "1",
        "storageStatus": "0",
        "remark": null,
        "createBy": "admin",
        "createTime": "2019-04-02",
        "updateBy": "admin",
        "updateTime": "2019-04-02"
      }],
      isorter: {
        column: 'createTime',
        order: 'desc',
      },
      url: {},
    }
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.levelNum = 4;
      this.gridNum = 2;
      this.boxNum = 2;

    }
  }
}
</script>
<style scoped>
.ant-card-body .table-operator {
  margin-bottom: 18px;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 15px;
  padding-bottom: 15px;
}

.anty-row-operator button {
  margin: 0 5px
}

.ant-btn-danger {
  background-color: #ffffff
}

.ant-modal-cust-warp {
  height: 100%
}

.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto
}

.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden
}
</style>

